<script setup lang="ts" name="msgUps">
import { ref, watchEffect } from 'vue'
import { useModalStore } from '@/stores/modalStore'
import { storeToRefs } from 'pinia'
const { data } = storeToRefs(useModalStore())
const type = ref<'success' | 'info' | 'error' | 'warning'>('success')

watchEffect(() => {
  if (data.value.status === 200) {
    type.value = 'success'
  } else {
    type.value = 'error'
  }
})
</script>

<template>
  <div id="alert" style="max-width: 400px">
    <el-alert :title="data.data.msg" :type="type" center show-icon :closable="false" />
  </div>
</template>

<style scoped>
#alert {
  position: fixed;
  top: 20%;
  left: 50%;
  translate: -50% -20%;
  width: 400px;
  border-radius: var(--radius);
  box-shadow: 0 2px 2px 0 var(--color2);
}
.el-alert {
  background-color: var(--color3);
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
</style>
